<!doctype html>
<html>
<head>
  <title>Vis Network | Edge Styles | Arrow Types</title>

  <script type="text/javascript" src="../../../standalone/umd/vis-network.min.js"></script>

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 540px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>

<p>
  The types of endpoints.
  The default is <code>'arrow'</code>.
</p>
<p id="arrow_type_list"></p>

<div id="mynetwork"></div>

<script type="text/javascript">
  var arrow_types = [
    'arrow', 'bar', 'circle', 'box', 'crow', 'curve', 'inv_curve',
    'diamond', 'triangle', 'inv_triangle', 'vee'
  ];

  // update list of arrow types in html body
  var nof_types = arrow_types.length;
  var list_contents = [];
  for(var i = 0; i < nof_types; i++) {
    list_contents.push("<code>'" + arrow_types[i] + "'</code>");
  }
  var mylist = document.getElementById("arrow_type_list");
  mylist.innerHTML = list_contents.join(", ");

  // create an array with nodes
  var node_attrs = new Array();
  var nodes = arrow_types.slice();
  nodes.push("end");
  console.log(nodes);
  var nof_nodes = nodes.length;
  for(var i = 0; i < nof_nodes; i++) {
    node_attrs[i] = {
      id: i+1,
      label: nodes[i]
    };
  }
    
  var nodes = new vis.DataSet(node_attrs);

  // create an array with edges
  var edge_attrs = new Array();
  var nof_edges = nof_nodes - 1;
  for(var i = 0; i < nof_edges; i++) {
    edge_attrs[i] = {
      from: i+1, to: i+2, arrows: {
        to: {
          enabled: true,
          type: arrow_types[i]
        }
      }
    }
  }

  var edges = new vis.DataSet(edge_attrs);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };

  var options = {
/*
    // Enable this to make the endpoints smaller/larger
    edges: {
      arrows: {
        to: {
          scaleFactor: 5
        }
      }
    }
*/
  };

  var network = new vis.Network(container, data, options);
</script>


</body>
</html>
